<template>
    <div class="main">
        <div class="new-wrap">
            <input class="newinput"
                   v-model="DeptName"
                   type="text">
            <div class="search"
                 @click="showlistmsg()">
                <x-icon type="ios-search"
                        class="searchicon"
                        size=16></x-icon>
            </div>
        </div>
        <div class="newposition">
            <noData v-if="dataArr.length == 0"></noData>
            <div v-for="(item,index) in dataArr"
                 @click="resultClick(item)"
                 :key="index"
                 class="newdepetlidt">
                {{item.DeptName}}
            </div>
        </div>
        <div class="weui-toast1"
             v-if="showloading">
            <i class="weui-loading1 weui-icon_toast1"></i>
            <p class="weui-toast__content weui-toast__content1">Loading</p>
        </div>
        <myMenu></myMenu>
    </div>

</template>

<script>
import { XHeader, Tabbar, TabbarItem, Group, Cell, Search } from 'vux'
import myMenu from '@/commonComponents/menu'
export default {
    name: 'App',
    data () {
        return {
            results: [],
            dataArr: [],
            DeptName: '',
            newshowLsit: [],
            listflag: false,
            checkList: [],
            parentId: [],
            parentName: '',
            newId: '',
            desc: [],
            showloading: false,
            userId: '',
            tokenId: '',
            projectId: '',
            userInfo: ''

        }
    },
    components: {
        Tabbar,
        TabbarItem,
        Group,
        Cell,
        XHeader,
        Search,
        myMenu
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.userId = this.userInfo.userid
        this.tokenId = this.userInfo.tokenId
        this.projectId = this.userInfo.deptid
        this.getData()
        // this.showlistmsg();
    },
    methods: {
        getData () {
            let params = {
                'allowPaging': false,
                'business': 'FetchHiddenDangerStandards',
                'data': {
                    'ProjectId': this.userInfo.deptid
                },
                'tokenId': this.userInfo.tokenId,
                'userId': this.userInfo.userId
            }
            this.$axiosAjax.getConfigJson(params).then((res) => {
                if (res.data.code === 0) {
                    this.dataArr = res.data.data
                }
            }).catch(() => {

            })
        },
        setFocus () {
            this.$refs.search.setFocus()
        },
        resultClick (item) {
            localStorage.setItem('selectHideType', JSON.stringify(item))
            if (this.$route.query.id) {
                this.$store.state.hiddenlist1[this.$route.query.id] = Object.assign({}, this.$store.state.hiddenlist1[this.$route.query.id], {
                    'category': item.DeptName,
                    'categoryId': item.DeptId
                })
            } else {
                if (this.$store.state.localId) {
                    this.$store.state.hiddenlistLocalId[this.$store.state.localId] = Object.assign({}, this.$store.state.hiddenlistLocalId[this.$store.state.localId], {
                        'category': item.DeptName,
                        'categoryId': item.DeptId
                    })
                } else {
                    this.$store.state.hiddenlist = Object.assign({}, this.$store.state.hiddenlist, {
                        'category': item.DeptName,
                        'categoryId': item.DeptId
                    })
                }
            }
            this.$router ? this.$router.back() : window.history.back()
        },
        onFocus () {
            console.log('on focus')
        },
        onCancel () {
            this.showlistmsg()
            console.log('on cancel')
            console.log(this.results)
        },
        resultFilter () {
            let res
            res = this.dataArr.filter(item => {
                return item.title.indexOf(this.DeptName) != -1
            })
            return res
        },
        showlistmsg () {
            this.$router.push({ path: '/changesearch', query: { DeptName: this.DeptName } })
        },
        changeclick (item, index) {
            if (!this.checkList[index]) {
                let flag = false
                let showflag = false
                this.parentId.forEach(
                    (itemlist, indexlist) => {
                        if (itemlist) {
                            flag = true
                            if (itemlist == item.ParentId) {
                                showflag = true
                                this.parentId[index] = item.ParentId
                            }
                        }
                    }
                )
                if (!flag) {
                    this.parentId[index] = item.ParentId
                } else {
                    if (!showflag) {
                        this.$vux.toast.text('请选择相同的类别')
                        return false
                    }
                }
            } else {
                this.parentId[index] = ''
            }
            this.checkList[index] = !this.checkList[index]
            this.$forceUpdate()
        },
        tosavemsg () {
            let flag = true
            this.parentId.forEach(
                (itemlist, indexlist) => {
                    if (itemlist) {
                        flag = false
                        this.newId = itemlist
                        this.parentName = this.newshowLsit[indexlist].ParentName
                        this.desc = [...this.desc, this.newshowLsit[indexlist].Desc]
                    }
                }
            )

            if (flag) {
                this.$vux.toast.text('请至少选择一个类别')
                return false
            }
            if (this.$store.state.localId) {
                this.$store.state.hiddenlistLocalId[this.$store.state.localId] = Object.assign({}, this.$store.state.hiddenlistLocalId[this.$store.state.localId], {
                    'category': this.parentName,
                    'categoryId': this.newId,
                    'description': this.desc.join(',')
                })
            } else {
                this.$store.state.hiddenlist = Object.assign({}, this.$store.state.hiddenlist, {
                    'category': this.parentName,
                    'categoryId': this.newId,
                    'description': this.desc.join(',')
                })
            }
            this.$router ? this.$router.back() : window.history.back()
        },
        selectmanage () { // 获取隐患类别
            let param = {
                'allowPaging': true,
                'business': 'GetFetchHiddenDangerStandardDetail',
                'data': this.desc.join(','),
                'pageIndex': 0,
                'pageSize': 0,
                'tokenId': this.userInfo.tokenId,
                'userId': this.userInfo.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    if (res.data.code == 0) {
                        let msg = res.data.data.DeptDetail
                        this.$store.state.hiddenlist = Object.assign({}, this.$store.state.hiddenlist, {
                            'measure': msg
                        })
                        this.$router ? this.$router.back() : window.history.back()
                    }
                }
            )
        },
        showlistchange (item) {
            let a = new RegExp(this.DeptName)
            let c = item.ParentName.replace(a, `<span style="color:red">${this.DeptName}</span>`)
            let d = item.SecondCategoryName.replace(a, `<span style="color:red">${this.DeptName}</span>`)
            return `${c}>${d}`
        },
        shownewchange (item) {
            let a = new RegExp(this.DeptName)
            let c = item.Desc.replace(a, `<span style="color:red">${this.DeptName}</span>`)
            return `${c}`
        }

    },
    activated () {
        this.setFocus()
    }
}
</script>

<style scoped>
.weui-search-bar__label {
    line-height: 26px;
}
.newposition {
    position: fixed;
    top: 40px;
    bottom: 0;
    width: 100%;
    left: 0;
    overflow: scroll;
    background: #fff;
}
.new-wrap {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
}
.newinput {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    padding: 0 20px;
    border-bottom: 1px solid #ccc;
    padding-right: 50px;
}
.search {
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    line-height: 40px;
    width: 40px;
    text-align: center;
}
.searchicon {
    position: absolute;
    top: 6px;
    left: 4px;
}
.newlistposition {
    padding: 20px;
    border-bottom: 1px solid #ccc;
}
.newdepetlidt {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    border-bottom: 1px solid #ccc;
}
.newchange {
    margin-bottom: 6px;
}
.weui-loading1 {
    animation-duration: 0.6s;
    animation-iteration-count: infinite;
    animation-name: vux-loading;
    animation-timing-function: linear;
    border-radius: 99em;
    border: 3px solid #ddd;
    border-left-color: #666;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-width: 2px;
    display: block;
    vertical-align: middle;
    text-align: center;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 10px;
}
.weui-toast1 {
    position: fixed;
    z-index: 3;
    width: 7.6em;
    min-height: 7.6em;
    top: 48vw;
    left: 50%;
    margin-left: -3.8em;
    background: rgba(17, 17, 17, 0.7);
    text-align: center;
    border-radius: 1.333vw;
    color: #fff;
    content: 'viewport-units-buggyfill; top: 48vw; border-radius: 1.333vw';
}
.weui-toast__content1 {
    color: #fff;
}
.changecolor {
    color: red;
}
@keyframes vux-loading {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
</style>
